<template>
  <div class="production-task-list">
    <h2>生产任务列表</h2>

    <!-- 查询区域 -->
    <div class="search-container">
      <el-select v-model="searchType" style="width: 140px; margin-right: 10px">
        <el-option label="任务ID" value="taskId" />
        <el-option label="工单ID" value="orderId" />
        <el-option label="产品名称" value="productName" />
        <el-option label="客户名称" value="customerName" />
        <el-option label="状态" value="status" />
        <el-option label="优先级" value="priorityDescription" />
      </el-select>
      <el-input
          v-model="searchQuery"
          :placeholder="`请输入${searchTypeLabel}进行查询`"
          clearable
          @keyup.enter="filterTasks"
          style="width: 300px; margin-right: 10px"
      />
      <el-button type="primary" @click="filterTasks">查询</el-button>
      <el-button @click="resetFilter">重置</el-button>
      <el-button type="success" @click="refreshData" style="margin-left: 20px">
        <el-icon><Refresh /></el-icon>
        刷新数据
      </el-button>
    </div>

    <el-table :data="filteredTasks" style="width: 100%" v-loading="loading" stripe border>
      <el-table-column prop="taskId" label="任务ID" width="120" />
      <el-table-column prop="orderId" label="工单ID" width="120" />
      <el-table-column prop="productName" label="产品名称" width="180" show-overflow-tooltip />
      <el-table-column prop="customerName" label="客户名称" width="150" show-overflow-tooltip />
      <el-table-column prop="quantity" label="任务数量" width="100" />
      <el-table-column prop="priorityDescription" label="优先级" width="80">
        <template #default="scope">
          <el-tag :type="getPriorityTagType(scope.row.priority)">
            {{ scope.row.priorityDescription }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="machineId" label="分配机器" width="120">
        <template #default="scope">
          {{ scope.row.machineId || '未分配' }}
        </template>
      </el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <el-tag :type="getStatusTagType(scope.row.status)">
            {{ scope.row.status }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="dueDate" label="交货日期" width="120" />
      <el-table-column prop="plannedStart" label="计划开始" width="140" />
      <el-table-column prop="plannedEnd" label="计划结束" width="140" />
      <el-table-column label="操作" width="250" fixed="right">
        <template #default="scope">
          <el-button size="small" type="primary" @click="viewDetail(scope.row.taskId)">
            查看详情
          </el-button>
<!--          <el-button size="small" @click="editTask(scope.row)">编辑</el-button>-->
<!--          <el-button size="small" type="danger" @click="deleteTask(scope.row.taskId)">删除</el-button>-->
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import { Refresh } from '@element-plus/icons-vue';

const emit = defineEmits(['view-detail', 'edit-task', 'delete-task', 'refresh-data']);

const props = defineProps({
  tasks: {
    type: Array,
    required: true,
    default: () => []
  },
  loading: {
    type: Boolean,
    default: false
  }
});

const searchType = ref('taskId');
const searchQuery = ref('');

// 获取搜索类型的显示标签
const getSearchTypeLabel = (type) => {
  const labels = {
    taskId: '任务ID',
    orderId: '工单ID',
    productName: '产品名称',
    customerName: '客户名称',
    status: '状态',
    priorityDescription: '优先级'
  };
  return labels[type] || '信息';
};

const searchTypeLabel = computed(() => getSearchTypeLabel(searchType.value));

// 计算属性：根据查询条件过滤任务
const filteredTasks = computed(() => {
  if (!searchQuery.value) {
    return props.tasks;
  }
  return props.tasks.filter(task => {
    const value = task[searchType.value];
    return value && value.toString().toLowerCase().includes(searchQuery.value.toLowerCase());
  });
});

// 优先级标签类型
const getPriorityTagType = (priority) => {
  const types = { 1: 'danger', 2: 'warning', 3: 'info' };
  return types[priority] || 'default';
};

const getStatusTagType = (status) => {
  switch (status) {
    case '待分配': return 'info';
    case '已分配': return 'warning';
    case '进行中': return 'primary';
    case '已完成': return 'success';
    default: return 'default';
  }
};

const viewDetail = (taskId) => {
  console.log('查看详情 - 任务ID:', taskId); // 调试日志
  emit('view-detail', taskId);
};

const editTask = (task) => {
  emit('edit-task', task);
};

const deleteTask = (taskId) => {
  emit('delete-task', taskId);
};

const refreshData = () => {
  emit('refresh-data');
};

// 过滤任务
const filterTasks = () => {
  // 计算属性会自动响应 searchType 和 searchQuery 的变化，所以这里不需要额外逻辑
};

// 重置过滤
const resetFilter = () => {
  searchType.value = 'taskId';
  searchQuery.value = '';
};
</script>

<style scoped>
.search-container {
  margin-bottom: 20px;
  display: flex;
  align-items: center;
}
</style>